<template><!-- 样式没有找样式 -->
	<view class="vipmodel">

		<view style="padding: 20rpx 3% 20rpx 0;">
			<view class="titleb" style="margin-left: 20rpx;">选择品牌/车系</view>
			<view class="brand" style="display: flex;margin-top: 20rpx;">
				<scroll-view class="left" scroll-y style="width: 40%;background: #f5f5f5;height: 750rpx;">
					<view class="item flex111" v-for="(item,index) in brandlist" @click="brand_index = index"
						style="padding: 20rpx 0;width: 100%;" :class="brand_index==index?'on':''">
						<view style="width: 8rpx;height: 42rpx;"
							:style="brand_index==index?'border-left: 5rpx solid #3388ff;':'border-left: 5rpx solid #f5f5f5;'">
						</view>
						<image :src="item.image"
							style="width:80rpx;height: 80rpx;margin-right: 10rpx;margin-left: 15rpx;" mode="">
						</image>
						<view>{{item.name}} </view>
						<text v-if="item.has" style="color: #3388ff;float: right;">●</text>
					</view>
				</scroll-view>
				<scroll-view class="right" scroll-y style="flex:1;height: 750rpx;">
					<view class="item flex111" v-for="(item,index) in brandlist">
						<view v-if="index == brand_index">
							<view class="chexingitem flex1" @click="xuanchexing(index,ind)" :class="it.check?'on':''"
								v-for="(it,ind) in item.chexing" style="padding: 20rpx 30rpx;">
								<view>{{it.name}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="flexa" style="width: 700rpx;margin: 20rpx 0;">
				<view class="btn113" @click="close">返回</view>
				<view class="btn113" @click="clean">重置</view>
				<view class="btn111" @click="queding">确定</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		name: "vipmodel",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			type: ''

		},
		data() {
			return {
				brandlist: [],
				brand_index: 0,
				branddata: {
					brand_id: '',
					brand_title: '',
					chexing_id: '',
					brand_title: '',
				}
			}
		},
		watch: {
			show(newval, oldval) {
				// this.getdata()
			}
		},
		created() {
			// that = this;
			this.getdata()
		},
		methods: {
			close() {
				this.$emit('close', 1);
			},
			getdata() {
				// app.post('ApiIndex/getbrand', {

				// }, function(res) {
				this.brandlist = [{
						aid: 1,
						api_id: 1,
						chexing: [{					
								aid: 1,
								brand_id: 1,
								check: false,
								id: 11,
								image: "https://car2.autoimg.cn/cardfs/product/g27/M03/D3/67/autohomecar__ChxkmWLmMI2ACHSvABBW_v_Ebv0632.jpg",
								name: "朗逸",
								status: 1,
							}, {
								aid: 1,
								brand_id: 1,
								check: false,
								id: 12,
								image: "https://car2.autoimg.cn/cardfs/product/g28/M04/B1/ED/autohomecar__CjIFVGQkG5KAT-PRABkletElVsw540.jpg",
								name: "帕萨特",
								status: 1,
							}, {
								aid: 1,
								brand_id: 1,
								check: false,
								id: 13,
								image: "https://car2.autoimg.cn/cardfs/product/g27/M06/FD/45/autohomecar__CjIFVWQqrL-AH2kyACYbaTH9ah4655.jpg",
								name: "途观L",
								status: 1,
							}],

							has: false,
							id: 1,
							image: "https://zuche2.ji00.cc/upload/1/20230829/f16ef55bb6e3187edb1c56c70473885d.png",
							name: "大众",
							status: 1,
						}, {
							aid: 1,
							api_id: 36,
							chexing: [{
								aid: 1,
								brand_id: 2,
								check: false,
								id: 152,
								image: "https://car2.autoimg.cn/cardfs/product/g30/M06/39/E7/autohomecar__ChsFJ2MMpL2AADHxACJ4mv5_ilE074.jpg",
								name: "奔驰EQE",
								status: 1,
							}, {
								aid: 1,
								brand_id: 2,
								check: false,
								id: 153,
								image: "https://car2.autoimg.cn/cardfs/product/g28/M03/72/77/autohomecar__ChxkmmQ9LfSAJh2hAB8VBt2VKWk301.jpg",
								name: "奔驰EQE SUV",
								status: 1,
							}],
							has: false,
							id: 2,
							image: "https://zuche2.ji00.cc/upload/1/20230829/f16ef55bb6e3187edb1c56c70473885d.png",
							name: "奔驰",
							status: 1,
						}];
						// });
					},
					xuanchexing(index, ind) {
						console.log('this.type', this.type);
						if (this.type == 2) { //编辑车辆  单选
							for (let index = 0; index < this.brandlist.length; index++) {
								this.brandlist[index]['has'] = false;
								for (let i = 0; i < this.brandlist[index]['chexing'].length; i++) {
									this.brandlist[index]['chexing'][i].check = false;
								}
							}
							this.brandlist[index]['chexing'][ind].check = true;

							this.branddata = {
								brand_id: this.brandlist[index].id,
								brand_title: this.brandlist[index].name,
								chexing_id: this.brandlist[index]['chexing'][ind].id,
								chexing_title: this.brandlist[index]['chexing'][ind].name,
							}
							console.log('this.branddata', this.branddata);


							//多选 筛选列表
						} else {
							this.brandlist[index]['chexing'][ind].check = !this.brandlist[index]['chexing'][ind].check;
						}


						var has = false
						for (let i = 0; i < this.brandlist[index]['chexing'].length; i++) {
							if (this.brandlist[index]['chexing'][i].check) {
								has = true;
								break;
							}
						}
						this.brandlist[index]['has'] = has;


					},
					queding() {
						var chexing_id = [];
						for (var index = 0; index < this.brandlist.length; index++) {
							for (let i = 0; i < this.brandlist[index]['chexing'].length; i++) {
								if (this.brandlist[index]['chexing'][i].check) {
									chexing_id.push(this.brandlist[index]['chexing'][i].id);
								}
							}
						}
						console.log('chexing_id', chexing_id);
						this.$emit('xuan', chexing_id.join(','))
						this.$emit('branddata', this.branddata)
					},
					clean() {
						var chexing_id = [];
						for (var index = 0; index < this.brandlist.length; index++) {
							for (let i = 0; i < this.brandlist[index]['chexing'].length; i++) {
								this.brandlist[index]['chexing'][i].check = false;
							}
							this.brandlist[index]['has'] = false;
						}
						console.log('chexing_id', chexing_id);
						this.$emit('xuan', '')
						this.$emit('branddata', {
							brand_id: '',
							brand_title: '',
							chexing_id: '',
							brand_title: '',
						})
					}
				}
			}
</script>
<style>
	.brand .left .item.on {
		background: #fff;
	}

	.chexingitem.on {
		color: #3388ff;
	}
</style>
<style>
	@charset "UTF-8";
	view{box-sizing: border-box;overflow:visible}
	text{box-sizing: border-box;}
	input{box-sizing: border-box;}
	image{box-sizing: border-box;}
	picker{box-sizing: border-box;}
	icon{box-sizing: border-box;}
	label{box-sizing: border-box;}
	textarea{box-sizing: border-box;}
	video{box-sizing: border-box;}
	scroll-view{box-sizing: border-box;}
	page{font-size:28rpx;background:#f6f6f6}
	button {padding-left: 0;padding-right: 0;background-color: transparent;font-size: 28rpx;border:0;border-radius: 0;overflow: visible;}
	
	.flex {display: flex;}
	.flex1 {flex-grow: 1;flex-shrink: 1;}
	.flex0 {flex-grow: 0;flex-shrink: 0;}
	.flex-row {display: flex;flex-direction: row;}
	.flex-col{display: flex;flex-direction: column;}
	.flex-x-center{display: flex;justify-content: center;}
	.flex-y-center{display: flex;align-items: center;}
	.flex-y-bottom{display: flex;align-items: flex-end;}
	.flex-bt{display: -webkit-flex;display: box;display: flexbox;display: flex;flex-direction: row;justify-content: space-between;}
	.flex-xy-center{display: flex;align-items: center;justify-content: center;}
	.flex-x-bottom{display: flex;justify-content: flex-end;}
	.flex-wp{display: -webkit-flex;display: box;display: flexbox;display: flex;flex-wrap: wrap;}
	
	
	
	
	.flex111 {
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	}
	.flexb {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.flexa {
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	}
	
	.uni-input-placeholder {
	  font-size: 28rpx !important;
	  color: #999 !important;
	}
	.ceng {
	  margin: 20rpx 0;
	}
	/* 标题加粗 */
	.titleb {
	  font-size: 16px;
	  font-weight: 600;
	  margin-bottom: 10rpx;
	}
	/* 圆角白色 */
	.yuanbox {
	  padding: 20rpx 3%;
	  width: auto;
	  background-color: #fff;
	  border-radius: 0;
	  width: 94%;
	  border: 2rpx solid #eee;
	  box-shadow: 0 2rpx 12rpx #eee;
	  margin-bottom: 20rpx;
	}
	.fixbot {
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  background: #fff;
	  padding: 10rpx 3%;
	  width: 94%;
	  border-top: 1px solid #eee;
	}
	.subbtn {
	  margin: 150rpx 5% 30rpx;
	  background-color: #d80000;
	  color: #fff;
	  text-align: center;
	  width: auto;
	  line-height: 85rpx;
	  height: 85rpx;
	  border-radius: 16rpx;
	  font-size: 32rpx;
	}
	/* radio 边框颜色 */
	 uni-radio .uni-radio-input {
	  border-color: #C0C2C9 !important;
	  width: 15px;
	  height: 15px;
	}
	/* radio 选中后的边框颜色 */
	 uni-radio .uni-radio-input-checked {
	  border-color: #FB5478 !important;
	}
	/* radio 选中后的样式 */
	uni-radio .uni-radio-input.uni-radio-input-checked {
	  background-color: #fff !important;
	  /* border: none; */
	  /* background-clip: content-box!important; */
	  /* padding: 2rpx!important; */
	  /* box-sizing: border-box; */
	}
	/* radio 边框颜色 */
	 uni-checkbox .uni-checkbox-input {
	  border-color: #C0C2C9 !important;
	  width: 15px;
	  height: 15px;
	}
	/* radio 选中后的边框颜色 */
	 uni-checkbox .uni-checkbox-input-checked {
	  border-color: #3388ff !important;
	}
	/* radio 选中后的样式 */
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
	  background-color: #3388ff !important;
	  /* border: none; */
	  /* background-clip: content-box!important; */
	  /* padding: 2rpx!important; */
	  /* box-sizing: border-box; */
	}
	
	
	
	::-moz-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}
	.btn111 {
	  padding: 0 35rpx;
	  background: #3388ff;
	  color: #fff;
	  border-radius: 60rpx;
	  height: 80rpx;
	  line-height: 80rpx;
	  text-align: center;
	  margin: 10rpx 20rpx;
	  flex: 1;
	  border: 2rpx solid #3388ff;
	  font-size: 16px;
	}
	.btn112 {
	  padding: 0 35rpx;
	  color: #d80000;
	  border-radius: 60rpx;
	  height: 70rpx;
	  line-height: 80rpx;
	  text-align: center;
	  margin: 10rpx 20rpx;
	  flex: 1;
	  border: 2rpx solid #d80000;
	  font-size: 14px;
	  flex: 1;
	}
	.btn113 {
	  padding: 0 35rpx;
	  color: #666;
	  border-radius: 60rpx;
	  height: 80rpx;
	  line-height: 74rpx;
	  text-align: center;
	  margin: 10rpx 20rpx;
	  flex: 1;
	  border: 2rpx solid #999;
	  font-size: 14px;
	  flex: 1;
	}
	.btn11 {
	  background: #3388ff;
	  color: #fff;
	  border-radius: 10rpx;
	  margin-left: 15rpx;
	  text-align: center;
	  flex: 1;
	  border: 2rpx solid #3388ff;
	  font-size: 14px;
	  padding: 7rpx 25rpx;
	}
	.btn12 {
	  border: 1px solid #3388ff;
	  color: #3388ff;
	  border-radius: 10rpx;
	  margin-left: 15rpx;
	  text-align: center;
	  flex: 1;
	  font-size: 14px;
	  padding: 7rpx 25rpx;
	}
	
	button::after {
	  border: none;
	}
	button {
	  background-color: #fff;
	  padding-left: 0;
	  padding-right: 0;
	  margin: 0;
	  font-size: 28rpx;
	  line-height: 32rpx;
	}
	.headzw {
	  width: 100%;
	  height: 90rpx;
	  display: inline-block;
	}

	uni-toast {
	  z-index: 9999;
	}
	
	.color {
	  color: #06c1ae;
	}

	
	
	

</style>